<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>摆渡村-壁纸-首页</title>
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/info.css">
    <link rel="stylesheet" href="css/mywall.css">
    <link rel="stylesheet" href="css/operation.css">
    <link rel="stylesheet" href="css/footer.css">
    <script rel="script" src="js/vue.js"></script>
    <style>
        ::-webkit-scrollbar {display:none}
    </style>
</head>
<body>
<div id="app">

    <div class="nav">
        <div class="brand">
            <div class="brand-title">摆渡壁纸</div>
        </div>
        <div class="menu">
            <ul>
                <li><a th:href="@{/}">首页</a></li>
                <li><a th:href="@{/view}">浏览</a></li>
                <li><a th:href="@{/me}">我的</a></li>
            </ul>
        </div>
        <div class="user">
            <div th:if="${session.say}" class="user-login"><a th:href="@{/me}" th:text="${session.user.userNickname}">登录</a></div>
        </div>
    </div>

    <div class="me-info" style="margin-top: 80px;">
        <div class="me-info-context">
            <img th:src="@{${me.iconPath}}" alt="" v-on:click="open()" id="imageShow" style="cursor: pointer;" title="点击更换头像">
            <form th:action="@{'/icon/' + ${me.userId}}" method="post" style="display: none;" enctype="multipart/form-data" id="icon">
                <input accept="image/*" type="file" name="file" id="fileUpload" v-on:change="flush(this)"/>
            </form>
            <div class="info">
                <h3>[[${me.nickname}]] <small th:text="${me.sex}"></small><small th:text="${me.level}"></small></h3>
                <h5 th:text="${me.info}">TA很懒，什么都没有留下......</h5>
            </div>
        </div>
    </div>

    <div class="operation" style="margin-top: 20px;">
        <div class="operation-context">
            <a class="btn" th:href="@{'/sign/' + ${me.userId}}">签到</a>
            <a class="btn" th:href="@{'/set/' + ${me.userId}}">设置</a>
            <a class="btn" th:href="@{/logout}">注销</a>
        </div>
    </div>

    <div class="my-wall" style="margin-top: 50px;">
        <div class="my-wall-context">
            <h3 style="margin-bottom: 20px;">已拥有</h3>

            <a th:each="item:${me.belongViews}" th:href="@{'/image/'+${item.wall.id}}" class="my-wall-view">
                <img th:src="@{${item.wall.viewPath}}" alt="">
                <div class="my-wall-info">
                    <h3> [[${item.wall.name}]] <small th:text="${item.time}"></small></h3>
                </div>
            </a>
        </div>
    </div>

    <div class="footer" style="margin-top: 80px;">
        <div class="footer-context">
            Copyright © 2020 摆渡壁纸 甘ICP备13013111号
        </div>
    </div>
</div>
<script type="application/javascript">
    let vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            open: function () {
                document.getElementById("fileUpload").click();
            },
            getObjectURL: function (file) {
                let url = null;
                if (window.createObjectURL !== undefined) {
                    url = window.createObjectURL(file);
                } else if (window.URL !== undefined) {
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL !== undefined) {
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            },
            flush: function () {
                let fileUpload = document.getElementById("fileUpload");
                if (fileUpload.files[0] !== undefined) {
                    let imgPath = this.getObjectURL(fileUpload.files[0]);
                    let imageShow = document.getElementById("imageShow");
                    imageShow.setAttribute("src", imgPath);
                    document.getElementById("icon").submit();
                }
            }
        }
    });
</script>
</body>
</html>